<script setup lang="ts">
import { onMounted } from 'vue'
import dayjs from 'dayjs'
import LineCharts from './line.vue'
import Pie from './pie.vue'
import Pie1 from './pie1.vue'
import Pie2 from './pie2.vue'
import BarCharts from './bar.vue'
import WaterBar from './back-water-bar.vue'
import { api_getHomeBaseInfo, api_getwaterTemperature, api_getWeatherChartData, api_getHeatData } from '~@/api/common/home.module'
const open = ref<boolean>(false)

function showModal() {
  open.value = true
}


// ======================================================= 各站单耗排名 | S
const unitConsumption = ref([]);
async function getHeatData() {
  console.log("unitConsumption __________________");
  const p = {
    curTime: dayjs().format("YYYY-MM-DD")
  };
  await api_getHeatData(p).then(res => {
    if (res.data.isSuccess) {
      unitConsumption.value = res.data.result;
      unitConsumption.value = unitConsumption.value.slice(0, 10);
      console.log("unitConsumption __________________", unitConsumption.value)
    }
  })
}
// ======================================================= 各站单耗排名 | E



// ======================================================= 回水温度排名 | S
// 莫名 02

const waterTemperatureList = ref([]);
async function getwaterTemperature() {
  console.log("unitConsumption __________________");
  const p = {
    curTime: dayjs().format("YYYY-MM-DD")
  };
  await api_getwaterTemperature(p).then(res => {
    if (res.data.isSuccess) {
      waterTemperatureList.value = res.data.result;
      unitConsumption.value = unitConsumption.value.slice(0, 10);
      console.log("unitConsumption __________________", waterTemperatureList.value)
    }
  })
}
// ======================================================= 回水温度排名 | E


const date = ref([])

function handleOk(e: MouseEvent) {
  console.log(dayjs(date.value[0]).format('YYYY-MM-DD'))
  open.value = false
}

const rangVal = computed(() => [dayjs(date.value[0]).format('YYYY-MM-DD'), dayjs(date.value[1]).format('YYYY-MM-DD')])

// =========================== 历史分析 | E

/**
 * api_getSysTime 当前系统日期
 *
 *
 */

//  ======================= 本周能耗

const value1 = ref('all')
const options1 = ref<SelectProps['options']>([
  {
    value: 'jack',
    label: 'Jack',
  },
  {
    value: 'lucy',
    label: 'Lucy',
  },
  {
    value: 'disabled',
    label: 'Disabled',
    disabled: true,
  },
  {
    value: 'yiminghe',
    label: 'Yiminghe',
  },
])
function focus() {
  console.log('focus')
}

function handleChange(value: string) {
  console.log(`selected ${value}`)
}

watch(date, (cur, old) => {
  console.log('cur _____________', cur)
})

const loading = ref(true)

const visitData = ref([])

// ==================== 折线图 | S

const weatherChart = reactive({})
const weatherChart_week = reactive({})

async function getWeatherData() {
  await api_getWeatherChartData().then((res) => {
    if (res.data.isSuccess) {
      const { xLabel, yData } = res.data.result
      const option1 = {
        xAxis: {
          data: xLabel,
        },
        yAxis: {
          data: 'value',
          axisLine: {
            show: false,
          },
        },
        // #4facfe→#00f2fe
        series: [
          {
            data: yData[0],
            type: 'line',
            lineArea: {
              show: true,
              gradient: ['#04befe', '#04befe'],
            },
          },
          {
            data: yData[1],
            type: 'line',
            lineArea: {
              show: true,
              // 122 Cheerful CaramelGet .PNG#e6b980→#eacda3
              gradient: ['#fdd6bd', '#f794a4'],
            },
          },
        ],
      }
      weatherChart.setOption(option1)

      const option01 = {
        xAxis: {
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        },
        yAxis: [
          {
            data: 'value',
          },
          {
            data: 'value',
            position: 'right',
            max: 2000,
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: '人流量',
            data: [1000, 1200, 900, 1500, 900, 1200, 1000],
            type: 'line',
            smooth: true,
            lineArea: {
              show: true,
              gradient: ['rgba(251, 114, 147, 1)', 'rgba(251, 114, 147, 0)'],
            },
            lineStyle: {
              stroke: 'rgba(251, 114, 147, 1)',
              lineDash: [3, 3],
            },
            linePoint: {
              style: {
                stroke: 'rgba(251, 114, 147, 1)',
              },
            },
            yAxisIndex: 1,
          },
          {
            name: '销售额',
            data: [1500, 1700, 1400, 2000, 1400, 1700, 1500],
            type: 'bar',
            gradient: {
              color: ['rgba(103, 224, 227, .6)', 'rgba(103, 224, 227, .1)'],
            },
            barStyle: {
              stroke: 'rgba(103, 224, 227, 1)',
            },
          },
        ],
      }

      weatherChart_week.setOption(option01)
    }
  })
}

// 首页基本数据
const baseInfo = ref({})
async function getHomeBaseInfo() {
  await api_getHomeBaseInfo().then((res) => {
    if (res.data.isSuccess) {
      baseInfo.value = res.data.result
      console.log('baseInfo _______________', baseInfo)
    }
  })
}

// ==================== 折线图 | E
// const loading = ref(true)
onMounted(async () => {
  await getHomeBaseInfo();
  await getHeatData();
  await getwaterTemperature();
  setTimeout(() => {
    loading.value = false;
  }, 2000)
})


const filterNum = (str) => {
  debugger
  return str.slice(0, 2) || "0"
}
</script>

<template>
  <div id="HeaderPage">
    <a-modal v-model:open="open" title="历史分析" @ok="handleOk">
      <div style="margin-top: 20px;">
        <a-range-picker v-model:value="date" size="small" />
      </div>
    </a-modal>

    <a-row style="margin-bottom: 20px;" :gutter="10">
      <a-col :span="14" style="width: 250px;">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/t_icon.png" style="width: 18px; height: 18px; margin-right: 10px;"> 本季供热概括
            </div>
          </template>

          <div style="height: 180px;">
            <div class="f_wrap" style="margin-top: 17px;">
              <div style="flex: 0 0 70px;  display: flex; justify-content: center; align-items: center;">
                <img src="@/assets/images/c_a.png" style="width: 35px; height: 35px;">
              </div>
              <div>
                <div style="display: flex; justify-content: start;">
                  <div>
                    <div>
                      <span class="f_data"> {{ baseInfo.pConArea || 0 }} </span>
                    </div>
                    <div class="f_label">
                      公建总建面积（万 m²）
                    </div>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <span class="f_data"> {{ baseInfo.pConTranArea || 0 }}</span>
                  <!-- （61个） -->
                </div>
                <div class="f_label">
                  改造总建面积（万 m²）
                </div>
              </div>
              <div>
                <div>
                  <span class="f_data">{{ baseInfo.pcConSeasonArea || 0 }} </span>
                  <!-- （61个） -->
                </div>
                <div class="f_label">
                  本季实供面积（万 m²）
                </div>
              </div>
              <div>
                <div>
                  <span class="f_data"> {{ baseInfo.pConLoadRate || 0 }}</span> %
                </div>
                <div class="f_label">
                  本季供热负荷率
                </div>
              </div>
            </div>

            <div style="margin-top: 20px;" class="f_wrap">
              <div style="flex: 0 0 70px; display: flex; justify-content: center; align-items: center;">
                <img src="@/assets/images/water.png" style="width: 37px; height: 37px;">
              </div>
              <div>
                <div>
                  <span class="f_data">{{ baseInfo.pConCurEn || 0 }}</span> GJ
                </div>
                <div class="f_label">
                  当前总能耗（GJ）
                </div>
              </div>
              <div>
                <div>
                  <span class="f_data"> {{ baseInfo.pConCurAgeUnitEn || 0 }}</span> GJ/m²
                </div>
                <div class="f_label">
                  当前平均单耗
                </div>
              </div>
              <div>
                <div>
                  <span class="f_data">{{ baseInfo.pConCurDuRiCount || 0 }}</span> °C·d
                </div>
                <div class="f_label">
                  当前度日数（°C·d）
                </div>
              </div>
              <div>
                <div>
                  <span class="f_data">{{ baseInfo.pConSameSavePer || 0 }}</span> %
                </div>
                <div class="f_label">
                  同期比节能率
                </div>
              </div>
            </div>
          </div>
        </a-card>
      </a-col>

      <a-col :span="10">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/t_icon.png" style="width: 18px; height: 18px; margin-right: 10px;"> 今天24小时天气预报
            </div>
          </template>

          <template #extra>
            <!-- <a href="#">more</a> -->
            <!-- <a-button lang="small">
              历史分析
            </a-button> -->

            <div style="display: flex; justify-content: start; align-items: center; font-size: 11px;">
              <div style=" width: 10px; height: 2px; border-radius: 1px; margin: 0 12px; background-color: #0B5FD0;" />
              <i>预报气温</i>
              <div style="width: 10px; height: 2px; border-radius: 1px; margin:0 12px;background-color: #F5B939;" /><i>实际气温</i>
              <div style="margin-left: 20px; cursor: pointer;" @click="open = true">
                <img src="@/assets/images/his1.png" style="width: 25px; height: 25px; margin-right: 2px;">
              </div>
              <!-- <div style="width: 200px;">
              <a-range-picker v-model:value="date" size="small" />
            </div> -->
            </div>
          </template>
          <div style="height: 190px;">
            <LineCharts :date="rangVal" />
          </div>
          <!-- <p>card content</p>
          <p>card content</p>
          <p>card content</p> -->
        </a-card>
      </a-col>
    </a-row>










































    <!-- ================================================ 运行评价 | S -->
    <a-row style="margin-bottom: 20px;" :gutter="10">
      <a-col :span="14">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/s_.png" style="width: 18px; height: 18px; margin-right: 10px;"> 当前运行评价
            </div>
          </template>
          <div style="display: flex; justify-content: start; height: 200px; align-items: center; overflow: hidden;">
            <div style="height: 200px; transform: scale(.9); flex: 1;">
              <Pie />
            </div>
            <div style="height: 200px; transform: scale(.9); flex: 1;">
              <Pie1 />
            </div>
            <div style="height: 200px; transform: scale(.9); flex: 1;">
              <Pie2 />
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; justify-content: space-between; align-items: center; font-size: 12px;">
              <div><img src="@/assets/images/s_.png" style="width: 18px; height: 18px; margin-right: 10px;">
                24小时实际能耗与预测能耗对比</div>
              <a-select ref="select" v-model:value="value1" size="small" style="width: 120px; margin-left: 20px;"
                @focus="focus" @change="handleChange">
                <a-select-option value="all">
                  全部
                </a-select-option>
                <a-select-option value="a">
                  全部
                </a-select-option>
                <a-select-option value="disabled" disabled>
                  Disabled
                </a-select-option>
                <a-select-option value="Yiminghe">
                  yiminghe
                </a-select-option>
              </a-select>
            </div>
          </template>
          <template #extra>
            <!-- <div style="display: flex; justify-content: start; align-items: center; font-size: 11px;">
              <div style="width: 6px; height: 2px; border-radius: 1px; margin: 0 12px; background-color: #0CFAF7;" />
              室外温度
              <div style="width: 6px; height: 2px; border-radius: 1px; margin:0 12px;background-color: #EB766D;" />预测负荷
              <div style="width: 6px; height: 2px; border-radius: 1px; margin:0 12px;background-color: #34F807;" />实际负荷
              <div style="width: 6px; height: 2px; border-radius: 1px; margin:0 12px;background-color: #FBF30F;" />去年周期
            </div> -->
          </template>
          <div style="height: 200px;">
            <BarCharts />
          </div>
        </a-card>
      </a-col>
    </a-row>















































    <a-row style="margin-bottom: 20px;" :gutter="20">
      <a-col :span="6">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/water01.png" style="width: 18px; height: 18px; margin-right: 10px;"> 当前各站单耗排名
              （GJ/m³）
            </div>
          </template>
          <template #extra>
            <i>平均 {{ unitConsumption[0]?.curTotalheatdata1 || 2.1 }}</i>
          </template>

          <a-row v-for="i in unitConsumption" justify="start" style="padding: 0 10px; height: 100%;">
            <div style="width: 80px;  flex: 1;">
              {{ i.name }}
            </div>
            <div style="flex: 1; ">
              <a-progress style :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',
                
              }"
              :percent="i"
              >
                <template #format="percent">
                  <span>{{ percent.dayEnHeatData  }}</span>
                </template>
              </a-progress>
            </div>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/water02.png" style="width: 18px; height: 18px; margin-right: 10px;">
              当前各站单位流量排名（L/H/m²）
            </div>
          </template>
          <template #extra>
           <i> 平均 2.32</i>
          </template>


          <a-row v-for="i in unitConsumption" justify="start" style="padding: 0 10px; height: 100%;">
            <div style="width: 80px;  flex: 1;">
              {{ i.name }}
            </div>
            <div style="flex: 1; ">
              <a-progress style :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',
                
              }"
              :percent="i"
              >
                <template #format="percent">
                  <span>{{ percent.dayEnHeatData  }}</span>
                </template>
              </a-progress>
            </div>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/water03.png" style="width: 18px; height: 18px; margin-right: 10px;">
              当前各站用能比排名(%)
            </div>
          </template>
          <template #extra>
            <i>平均 26%</i>
          </template>
          <a-row v-for="i in unitConsumption" justify="start" style="padding: 0 10px; height: 100%;">
            <div style="width: 80px;  flex: 1;">
              {{ i.name }}
            </div>
            <div style="flex: 1; ">
              <a-progress style :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',
                
              }"
              :percent="i"
              >
                <template #format="percent">
                  <div style="text-align: right;">{{ percent.dayEnHeatData  }}</div>
                </template>
              </a-progress>
            </div>
          </a-row>
        </a-card>
      </a-col>

      <a-col :span="6">
        <a-card hoverable size="small" :loading="loading">
          <template #title>
            <div style="display: flex; align-items: center; font-size: 12px;">
              <img src="@/assets/images/water03.png" style="width: 18px; height: 18px; margin-right: 10px;">
              当前各站回水温度分布(°C)
            </div>
          </template>
          <template #extra>
            <i>平均 38.3</i>
          </template>

          <div style="height: 300px;">
            <WaterBar />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped lang="less">
#HeaderPage {
  width: 100%;

  .f_wrap {
    display: flex;
    justify-content: center;
    margin: 10px 0;

    &>div {
      flex: 1 0;
      // border: 1px solid red;
      margin-bottom: 10px;
    }
  }
}

:deep(.ant-card-head) {
  // background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%) !important;
  background-image: linear-gradient(to right, #02AAB0 0%, #02AAB0 51%, #02AAB0 100%) !important;
  // background: #348AC7 !important;
  color: #fff !important;
  border-radius: 4px !important;
}

:deep(.ant-card-body) {
  border-radius: 2px !important;
}


// ant-card-head
#main {
  width: 100%;
  height: 100%;
}

#main01 {
  width: 100%;
  height: 300px;
}

:where(.css-dev-only-do-not-override-1mphclt).ant-card .ant-card-head {
  // background-color: #01ADA8 !important;
}

// f_label 供暖概括

.f_label {
  font-size: 12px !important;
}

.f_data {
  font-size: 23px !important;
  font-weight: 550 !important;
}

.btn-grad {
  // background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%)
}

.btn-grad {
  margin: 10px;
  padding: 15px 45px;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 10px;
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}
</style>
